<template>
	<div class="shop">
    <div class="shopBonusContent">
      <div class="shopBonusSolo">
        <p>{{Public.formatMoney(accountListSet.sumInfo.accountListMoneySumByToday,2)}}</p>
        <span>今日奖励（元）</span>
      </div>
      <div class="shopBonusElse">
        <div>
          <p>{{Public.formatMoney(accountListSet.sumInfo.accountListMoneySum,2)}}</p>
          <span>累计奖励（元）</span>
        </div>
        <div>
          <p>{{Public.formatMoney(accountListSet.sumInfo.accountListMoneySumByYesterday,2)}}</p>
          <span>昨日奖励（元）</span>
        </div>
      </div>
    </div>

    <div class="shopBonusMore" @click="shopBonusMoreBtn">
      <span>明细</span>
      <em class="iconfont">&#xe61f;</em>
    </div>

    <div class="shopRebateData">
        <div v-for="(item,index) in accountListSet.list" class="shopRebateErgodic">
            <div>
              <p>{{item.accountListFromTypeDescribe}}</p>
              <span>{{item.createDateStr}}</span>
            </div>
            <p>
              <i>{{Public.formatMoney(item.accountListMoney,2)}}</i>
              <b>元</b>
            </p>
        </div>
    </div>

	</div>
</template>

<script>
	export default {
		data () {
			return {
			  //页面初始化数据
        accountListSet:{
          list:[],    //list列表数据查询
          sumInfo:{},  //奖励汇总信息
        },
      }
		},
		methods:{

      //跳转至明细页面
      shopBonusMoreBtn(){
          this.$router.push({path:"/shopBonusMore"})
      },

      //初始化页面数据
      queryByPage(){
          this.axios({
            method: 'post',
            url: "/v3/agent/accountLists/list",
            data:{
              "limit":3,
            }
          }).then((res) => {
            this.accountListSet.list = res.data.list;
            this.accountListSet.sumInfo = res.data.sumInfo;
          }).catch((err)=>{
            this.Public.vFun_openError(err.response.data);
          });
      },

		},

    created(){
      //初始化请求
      this.queryByPage();
    },

    activated(){
      document.querySelector('#vue_id_title').innerHTML="我的奖励";
    },

	}
</script>

<style scoped>
  em{
    font-style: normal;
  }

  .shopBonusTitle{
    border:0!important;
  }
  /*shopBonusContent Start*/
  .shopBonusContent{
    height: 5.6rem;
    background: #fff;
  }

  .shopBonusSolo{
    background: #e51c23;
    height: 3.6rem;
    color: #fff;
    text-align: center;
  }

  .shopBonusSolo p{
    padding-top: .4rem;
    font-size: 40px;
  }

  .shopBonusSolo span,
  .shopBonusElse div span,
  .shopBonusMore{
    font-size:12px;
  }

  .shopBonusElse {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    height: 2rem;
    border-bottom: 1px solid #ccc;
  }
  .shopBonusElse div{
    box-flex:1;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    text-align:center;
    padding-top: 0.4rem;
  }
  .shopBonusElse div p{
    color:#e51c23;
    font-weight: bold;
    font-size:16px;
  }
  /*shopBonusContent End*/

  /*shopBonusMore Start*/
  .shopBonusMore{
    font-size: 12px;
    color: #999;
    text-align: right;
    height: .8rem;
    line-height: .8rem;
    margin-right: .1rem;
  }
  .shopBonusMore em{
    font-size: 12px;
    display: inline-block;
    transform: rotateZ(180deg);
    vertical-align: top;

  }
  /*shopBonusContent End*/

  /*shopRebateData Start*/
  .shopRebateData{
    background:#fff;
    min-height: 10rem;
    border-top:1px solid #ccc;
  }

  .shopRebateErgodic{
    display:-webkit-box;
    border-bottom:1px solid #ccc;
  }

  .shopRebateErgodic div{
    -webkit-box-flex: 1;
    text-align: left;
    padding: 0.4rem 0 0.2rem 0.4rem;
    width: 50%;
  }

  .shopRebateErgodic div p{
    margin-bottom: 0.2rem;
  }

  .shopRebateErgodic div span{
    color: #999;
  }

  .shopRebateErgodic > p{
    -webkit-box-flex: 1;
    padding: 0.4rem 0.4rem 0.4rem 0;
    width: 50%;
    text-align: right;
  }

  .shopRebateErgodic > p b{
    font-weight: normal;
  }

  .shopRebateErgodic > p{
    line-height: 1rem;
  }
  .shopRebateErgodic > p i{
    color:#3f51b5;
    font-weight:bold;
    padding-right: .2rem;
    font-size:18px;
  }
  /*shopRebateData End*/

</style>
